<script setup>
import { ref } from 'vue'

// 当前选中的 tab
const activeTab = ref('进行中')

// 模拟数据
const tabs = ['进行中', '未开始', '已结束']
const dataList = {
  '进行中': [
    { id: 1, title: '问卷一', cover: 'https://via.placeholder.com/300x200', startTime: '2024-03-01', endTime: '2024-04-01', status: '进行中' },
    { id: 1, title: '问卷一', cover: 'https://via.placeholder.com/300x200', startTime: '2024-03-01', endTime: '2024-04-01', status: '进行中' },
    { id: 1, title: '问卷一', cover: 'https://via.placeholder.com/300x200', startTime: '2024-03-01', endTime: '2024-04-01', status: '进行中' },
    { id: 1, title: '问卷一', cover: 'https://via.placeholder.com/300x200', startTime: '2024-03-01', endTime: '2024-04-01', status: '进行中' },
    { id: 2, title: '问卷二', cover: 'https://via.placeholder.com/300x200', startTime: '2024-03-15', endTime: '2024-04-15', status: '进行中' }
  ],
  '未开始': [
    { id: 3, title: '问卷三', cover: 'https://via.placeholder.com/300x200', startTime: '2024-05-01', endTime: '2024-06-01', status: '未开始' }
  ],
  '已结束': [
    { id: 4, title: '问卷四', cover: 'https://via.placeholder.com/300x200', startTime: '2024-01-01', endTime: '2024-02-01', status: '已结束' }
  ]
}
</script>

<template>
  <el-card  shadow="never">
    <template #header>
      <div class="flex justify-between">
        <span>{{ $route?.meta?.title || '' }}</span>
        <div></div>
      </div>
    </template>
    <el-tabs v-model="activeTab" type="card" class="mb-6">
      <el-tab-pane v-for="tab in tabs" :key="tab" :label="tab" :name="tab">
        <!-- 卡片列表 -->
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-[10px]">
          <el-card
            v-for="item in dataList[activeTab]"
            :key="item.id"
            class="overflow-hidden"
            shadow="never"
          >
            <img :src="item.cover" alt="封面" class="w-full  h-[200px] object-cover">
            <div class="p-4">
              <h3 class="text-lg font-semibold">{{ item.title }}</h3>
              <p class="text-sm text-gray-500">开始时间：{{ item.startTime }}</p>
              <p class="text-sm text-gray-500">结束时间：{{ item.endTime }}</p>
              <p
                :class="[
                  'mt-2 px-2 py-1 inline-block text-xs rounded',
                  item.status === '进行中' ? 'bg-green-100 text-green-700' :
                  item.status === '未开始' ? 'bg-yellow-100 text-yellow-700' :
                  'bg-red-100 text-red-700'
                ]"
              >
                {{ item.status }}
              </p>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<style scoped lang="scss">
/* 如果需要固定图片高度 */
img {
  height: 200px;
}


</style>
